@tailwind base;
@tailwind components;
@tailwind utilities;

/* 全局样式 */
@layer base {
  * {
    @apply box-border;
  }
  
  html {
    @apply h-full;
  }
  
  body {
    @apply h-full m-0 p-0 font-sans antialiased;
    @apply bg-gray-50 dark:bg-chat-bg;
    @apply text-gray-900 dark:text-chat-text;
  }
  
  #app {
    @apply h-full;
  }
}

/* 组件样式 */
@layer components {
  .btn {
    @apply px-4 py-2 rounded-lg font-medium transition-all duration-200;
    @apply focus:outline-none focus:ring-2 focus:ring-offset-2;
    @apply disabled:opacity-50 disabled:cursor-not-allowed;
  }
  
  .btn-primary {
    @apply bg-chat-accent hover:bg-chat-accent-hover text-white;
    @apply focus:ring-chat-accent;
  }
  
  .btn-secondary {
    @apply bg-gray-600 hover:bg-gray-700 text-white;
    @apply focus:ring-gray-500;
  }
  
  .btn-ghost {
    @apply bg-transparent hover:bg-chat-hover text-chat-text;
    @apply border border-chat-border hover:border-chat-accent;
  }
  
  .input {
    @apply w-full px-3 py-2 rounded-lg border;
    @apply bg-white dark:bg-chat-input;
    @apply border-gray-300 dark:border-chat-border;
    @apply text-gray-900 dark:text-chat-text;
    @apply placeholder-gray-500 dark:placeholder-chat-text-secondary;
    @apply focus:outline-none focus:ring-2 focus:ring-chat-accent focus:border-transparent;
    @apply transition-all duration-200;
  }
  
  .card {
    @apply bg-white dark:bg-chat-sidebar rounded-lg shadow-lg;
    @apply border border-gray-200 dark:border-chat-border;
  }
  
  .message-user {
    @apply bg-chat-accent text-white rounded-2xl px-4 py-2 max-w-xs lg:max-w-md;
    @apply ml-auto mr-4 mb-4 animate-slide-up;
  }
  
  .message-assistant {
    @apply bg-white dark:bg-chat-input text-gray-900 dark:text-chat-text;
    @apply rounded-2xl px-4 py-2 max-w-xs lg:max-w-md;
    @apply mr-auto ml-4 mb-4 animate-slide-up;
    @apply border border-gray-200 dark:border-chat-border;
  }
  
  .sidebar-item {
    @apply flex items-center px-3 py-2 rounded-lg cursor-pointer;
    @apply text-chat-text-secondary hover:text-chat-text;
    @apply hover:bg-chat-hover transition-all duration-200;
  }
  
  .sidebar-item.active {
    @apply bg-chat-hover text-chat-text;
  }
}

/* 工具类 */
@layer utilities {
  .scrollbar-thin {
    scrollbar-width: thin;
    scrollbar-color: #4a4a4a #2f2f2f;
  }
  
  .scrollbar-thin::-webkit-scrollbar {
    width: 6px;
  }
  
  .scrollbar-thin::-webkit-scrollbar-track {
    background: #2f2f2f;
  }
  
  .scrollbar-thin::-webkit-scrollbar-thumb {
    background: #4a4a4a;
    border-radius: 3px;
  }
  
  .scrollbar-thin::-webkit-scrollbar-thumb:hover {
    background: #5a5a5a;
  }
  
  .text-gradient {
    background: linear-gradient(135deg, #10a37f, #1a73e8);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }
}

/* 动画 */
@keyframes typing {
  0%, 20% { opacity: 1; }
  50% { opacity: 0.5; }
  100% { opacity: 1; }
}

.typing-indicator {
  animation: typing 1.5s infinite;
}

/* 响应式隐藏/显示 */
@media (max-width: 768px) {
  .mobile-hidden {
    @apply hidden;
  }
  
  .mobile-full {
    @apply w-full;
  }
}

/* 深色模式切换动画 */
.dark-mode-transition {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* 自定义滚动条 */
.custom-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: rgba(155, 155, 155, 0.5) transparent;
}

.custom-scrollbar::-webkit-scrollbar {
  width: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background-color: rgba(155, 155, 155, 0.5);
  border-radius: 20px;
  border: transparent;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background-color: rgba(155, 155, 155, 0.7);
}